<template>
    <el-form-item label="地域" :prop="`adgroup.audience.${dataForm.audience_index}.location_ids`" :key="rush" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}">
        <!-- <el-popover placement="bottom-start" width="222" trigger="click">
            <el-input size="small" slot="reference" placeholder="搜索或选择地域" clearable suffix-icon="el-icon-search" v-model="filterText" style="width:318px">
            </el-input>
            <el-tree :default-checked-keys="defaultCheck" :filter-node-method="filterNode" :props="props" node-key="location_id" ref="tree" :data="treeData" show-checkbox @check-change="handleCheckChange">
            </el-tree>
        </el-popover>
        
        <div class="tk_tag_box" v-if="dataForm.adgroup.audience[dataForm.audience_index].location_ids.length>0">
            <el-tag type="info" v-for="(tag,index) in dataForm.adgroup.audience[dataForm.audience_index].location_ids" :key="tag.location_id" size="mini" @close="deleteTag(tag,index)">
                {{tag.name_ch}}
            </el-tag>
        </div> -->
        {{dataForm.adgroup.audience[dataForm.audience_index].location_ids[0].name_ch}}
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            props: {
                label:"name_ch",
            },
            treeData: [],
            filterText: "",
            rush:0
        };
    },
    created() {
        // this.getRegion()
    },
    computed:{
        defaultCheck(){
            return this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids.map(item=>{return item.location_id})
        },

        indexRush(){
            return this.dataForm.audience_index
        }
    },
    methods: {
        //获取地域
        async getRegion() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl+"launch/TiktokInfo/regionInfo",
                {
                    region_code:this.dataForm.base[0].targeting_region_codes,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.treeData = res.data
                let arr = []
                arr.push(res.data[0])
                this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids = arr
                console.log(this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids);
            }
        },

        getSimpleCheckedNodes(store) {
            // 定义数组
            const checkedNodes = [];
            // 判断是否为全选，若为全选状态返回被全选的节点，不为全选状态正常返回被选中的节点
            const traverse = function (node) {
                const childNodes = node.root
                    ? node.root.childNodes
                    : node.childNodes;
                childNodes.forEach((child) => {
                    if (child.checked) {
                        checkedNodes.push(child.data);
                    }
                    if (child.indeterminate) {
                        traverse(child);
                    }
                });
            };
            traverse(store);
            return checkedNodes;
        },

        handleCheckChange() {
            this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids = this.getSimpleCheckedNodes(this.$refs.tree.store);
            this.sessionSave()
        },

        deleteTag(item, index) {
            this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids.splice(index, 1);
            this.$refs.tree.setCheckedNodes(this.dataForm.adgroup.audience[this.dataForm.audience_index].location_ids);
            this.sessionSave()
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.name_ch.indexOf(value) !== -1;
        },

        sessionSave(){
            this.$emit("sessionSave")
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      indexRush(val){
        this.rush++
      }
    },
};
</script>


<style scoped>
/deep/ .el-tree-node__expand-icon.is-leaf{
    color:#17233D
}
.tk_tag_box{
    width: 318px;
    margin-top: 8px;
}
</style>


